<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<ui:composition template="/telaPrincipal.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui"
	xmlns:f="http://xmlns.jcp.org/jsf/core">

	<ui:define name="testeJR">
		<h:form id="frmTabCadastro">

			<p:dialog id="dialog" header="Software" widgetVar="saveSoftware" dynamic="true" draggable="false" resizable="false" width="350px" height="50px">
				<h:outputLabel value="Dados Cadastros com Sucesso" style="font-family: Arial;font-weight: bold; font-size: 18px" />
			</p:dialog>

			<p:remoteCommand name="updateChart" actionListener="#{cadastroSoftwareMB.atualizarGrafico()}" oncomplete="updateChartData(xhr, status, args);" />

			<p:tabView id="TabViewCadastro">
				<p:tab id="tabCadastro" title="Cadastro">
					<br></br>

					<p:fieldset legend="Informações do Software">
						<br></br>

						<h:panelGrid columns="2" cellpadding="2">
							<h:outputLabel value="Nome" for="txtNome" style="font-family: Arial;font-weight: bold; font-size: 18px" />
							<p:inputText id="txtNome" size="50" value="#{cadastroSoftwareMB.software.nome}" />

							<h:outputLabel value="Desenvolvedor" for="txtDesenvolvedor" style="font-family: Arial;font-weight: bold; font-size: 18px" />
							<p:inputText id="txtDesenvolvedor" size="50" value="#{cadastroSoftwareMB.software.nomeDesenvolvedor}" />

							<h:outputLabel value="Data de Criação" for="txtDataCriacao" style="font-family: Arial;font-weight: bold; font-size: 18px" />
							<p:inputMask id="txtDataCriacao" mask="99/99/9999" size="10" value="#{cadastroSoftwareMB.software.dataCriacao}">
								<f:convertDateTime type="date" pattern="dd/MM/yyyy"/>
							</p:inputMask>

							<h:outputLabel value="Descrição" for="txtDescricao" style="font-family: Arial;font-weight: bold; font-size: 18px" />
							<p:inputText id="txtDescricao" size="50" value="#{cadastroSoftwareMB.software.descricao}" />
						</h:panelGrid>
					</p:fieldset>
				</p:tab>

				<p:tab id="tabAvaliacao" title="Avaliação">
					<p:fieldset legend="Avaliação do Software">
						<center>
							<h:panelGrid columns="3">
								<p:fieldset legend="Manutenibilidade">
									<p:selectOneRadio id="radioManutenibilidade"
										value="#{cadastroSoftwareMB.software.manutenibilidade}">
										<f:selectItem itemLabel="1" itemValue="1" />
										<f:selectItem itemLabel="2" itemValue="2" />
										<f:selectItem itemLabel="3" itemValue="3" />
										<f:selectItem itemLabel="4" itemValue="4" />
										<f:selectItem itemLabel="5" itemValue="5" />

										<p:ajax onstart="updateChart()" event="valueChange" />
									</p:selectOneRadio>
								</p:fieldset>
								
								<p:fieldset legend="Funcionalidade">
									<p:selectOneRadio id="radioFuncionalidade" value="#{cadastroSoftwareMB.software.funcionalidade}">
										<f:selectItem itemLabel="1" itemValue="1" />
										<f:selectItem itemLabel="2" itemValue="2" />
										<f:selectItem itemLabel="3" itemValue="3" />
										<f:selectItem itemLabel="4" itemValue="4" />
										<f:selectItem itemLabel="5" itemValue="5" />
										<p:ajax onstart="updateChart()" event="valueChange" />
									</p:selectOneRadio>
								</p:fieldset>
								
								<p:fieldset legend="Qualidade">
									<p:selectOneRadio id="radioQualidade" value="#{cadastroSoftwareMB.software.qualidade}">
										<f:selectItem itemLabel="1" itemValue="1" />
										<f:selectItem itemLabel="2" itemValue="2" />
										<f:selectItem itemLabel="3" itemValue="3" />
										<f:selectItem itemLabel="4" itemValue="4" />
										<f:selectItem itemLabel="5" itemValue="5" />
										<p:ajax onstart="updateChart()" event="valueChange" />
									</p:selectOneRadio>
								</p:fieldset>
							</h:panelGrid>
						</center>

						<center>
							<h:panelGrid columns="4">
								<p:fieldset legend="Confiabilidade">
									<p:selectOneRadio id="radioConfiabilidade" value="#{cadastroSoftwareMB.software.confiabilidade}">
										<f:selectItem itemLabel="1" itemValue="1" />
										<f:selectItem itemLabel="2" itemValue="2" />
										<f:selectItem itemLabel="3" itemValue="3" />
										<f:selectItem itemLabel="4" itemValue="4" />
										<f:selectItem itemLabel="5" itemValue="5" />
										<p:ajax onstart="updateChart()" event="valueChange" />
									</p:selectOneRadio>
								</p:fieldset>
								
								<p:fieldset legend="Portabilidade">
									<p:selectOneRadio id="radioPortabilidade" value="#{cadastroSoftwareMB.software.portabilidade}">
										<f:selectItem itemLabel="1" itemValue="1" />
										<f:selectItem itemLabel="2" itemValue="2" />
										<f:selectItem itemLabel="3" itemValue="3" />
										<f:selectItem itemLabel="4" itemValue="4" />
										<f:selectItem itemLabel="5" itemValue="5" />
										<p:ajax onstart="updateChart()" event="valueChange" />
									</p:selectOneRadio>
								</p:fieldset>

								<p:fieldset legend="Eficiência">
									<p:selectOneRadio id="radioEficiência" value="#{cadastroSoftwareMB.software.eficiencia}">
										<f:selectItem itemLabel="1" itemValue="1" />
										<f:selectItem itemLabel="2" itemValue="2" />
										<f:selectItem itemLabel="3" itemValue="3" />
										<f:selectItem itemLabel="4" itemValue="4" />
										<f:selectItem itemLabel="5" itemValue="5" />

										<p:ajax onstart="updateChart()" event="valueChange" />
									</p:selectOneRadio>
								</p:fieldset>

								<p:fieldset legend="Usabilidade">
									<p:selectOneRadio id="radioUsabilidade" value="#{cadastroSoftwareMB.software.usabilidade}">
										<f:selectItem itemLabel="1" itemValue="1" />
										<f:selectItem itemLabel="2" itemValue="2" />
										<f:selectItem itemLabel="3" itemValue="3" />
										<f:selectItem itemLabel="4" itemValue="4" />
										<f:selectItem itemLabel="5" itemValue="5" />

										<p:ajax onstart="updateChart()" event="valueChange" />
									</p:selectOneRadio>
								</p:fieldset>
							</h:panelGrid>
						</center>
						
						<center>
							<p:commandButton action="#{cadastroSoftwareMB.salvar}" value="Salvar" oncomplete="saveSoftware.show()" icon="ui-icon-disk" />
						</center>

						<center>
							<script type="text/javascript" src="#{facesContext.externalContext.requestContextPath}/chartjs/Chart.min.js"></script>

							<canvas id="graficoRadarCadastro" width="400" height="400"></canvas>

							<script>
								var myRadarChart;
								var ctx = document.getElementById('graficoRadarCadastro').getContext('2d');

								var options = {
									//Boolean - Whether to show lines for each scale point
									scaleShowLine : true,
									//Boolean - Whether we show the angle lines out of the radar
									angleShowLineOut : true,
									//Boolean - Whether to show labels on the scale
									scaleShowLabels : false,
									// Boolean - Whether the scale should begin at zero
									scaleBeginAtZero : true,
									//String - Colour of the angle line
									angleLineColor : "rgba(0,0,0,.1)",
									//Number - Pixel width of the angle line
									angleLineWidth : 1,
									//String - Point label font declaration
									pointLabelFontFamily : "'Arial'",
									//String - Point label font weight
									pointLabelFontStyle : "normal",
									//Number - Point label font size in pixels
									pointLabelFontSize : 11,
									//String - Point label font colour
									pointLabelFontColor : "White",
									//Boolean - Whether to show a dot for each point
									pointDot : true,
									//Number - Radius of each point dot in pixels
									pointDotRadius : 3,
									//Number - Pixel width of point dot stroke
									pointDotStrokeWidth : 1,
									//Number - amount extra to add to the radius to cater for hit detection outside the drawn point
									pointHitDetectionRadius : 20,
									//Boolean - Whether to show a stroke for datasets
									datasetStroke : true,
									//Number - Pixel width of dataset stroke
									datasetStrokeWidth : 2,
									//Boolean - Whether to fill the dataset with a colour
									datasetFill : true
								};

								function updateChartData(xhr, status, args) {
									var manutenibilidade = ((100 * args.avaliacaoManutenibilidade) / 5);
									var funcionalidade = ((100 * args.avaliacaoFuncionalidade) / 5);
									var qualidade = ((100 * args.avaliacaoQualidade) / 5);
									var confiabilidade = ((100 * args.avaliacaoConfiabilidade) / 5);
									var portabilidade = ((100 * args.avaliacaoPortabilidade) / 5);
									var eficiencia = ((100 * args.avaliacaoEficiencia) / 5);
									var usabilidade = ((100 * args.avaliacaoUsabilidade) / 5);

									console.log(manutenibilidade);
									console.log(funcionalidade);
									console.log(qualidade);
									console.log(confiabilidade);
									console.log(portabilidade);
									console.log(eficiencia);
									console.log(usabilidade);

									var data = {
										labels : [ "Manutenibilidade",
												"Funcionalidade", "Qualidade",
												"Confiabilidade", "Eficiência",
												"Portabilidade", "Usabilidade" ],
										datasets : [ {
											label : "The only dataset",
											fillColor : "rgba(151,187,205,0.2)",
											strokeColor : "rgba(151,187,205,1)",
											pointColor : "rgba(151,187,205,1)",
											pointStrokeColor : "#fff",
											pointHighlightFill : "#fff",
											pointHighlightStroke : "rgba(151,187,205,1)",
											data : [ manutenibilidade,
													funcionalidade, qualidade,
													confiabilidade, eficiencia,
													portabilidade, usabilidade ]
										} ]
									};

									myRadarChart = new Chart(ctx).Radar(data, options);
								}
							</script>
						</center>
					</p:fieldset>
				</p:tab>
			</p:tabView>
		</h:form>
	</ui:define>
</ui:composition>